<template>
  <div class="lin_main_page">
    <div class="lin_main_page_title">
      <div>
        <h1>Full-Stack Developer </h1>
        <h1>and Maintenance</h1>
        <p>I'm Selene, a design engineer at FLY, </p>
        <p>where I craft intuitive user experiences. </p>
      </div>
    </div>
    <div class="lin_main_page_introduce">
      <div class="lin_display_flex_around">
        <img src="/%20assets/static/images/logo.png" :class='{"lin_main_page_introduce_active": iconHide}'>
         <span :class='{"lin_main_page_introduce_active": iconHide}'>
           <a >
             <IntroduceDialog/>
           </a>
         </span>
        <a>
          <nuxt-link to="/about">
            <GuideButton
                class="lin_guide"
            />
          </nuxt-link>
        </a>
      </div>
      <div class="lin_main_page_introduce_icon lin_display_flex_evenly"
           @click="loginOpen"
           :class="{'isHide': isHide, 'isShow': isShow}"
      >
          <a class="lin_icon-wrapper">
            <el-icon size="15">
              <CollectionTag />
            </el-icon>
          </a>
          <a class="lin_icon-wrapper">
            <el-icon size="15">
              <Star />
            </el-icon>
          </a>
          <a>
            <IntroduceButton
                class="IntroduceButton"
            />
          </a>
      </div>
    </div>

    <div>
      <Carousel/>
    </div>
  </div>

</template>


<script setup lang="ts">
import { CollectionTag,Star } from '@element-plus/icons-vue';
import IntroduceButton from "~/ components/button/IntroduceButton.vue";
import IntroduceDialog from "~/ components/main/IntroduceDialog.vue";
import Carousel from "~/ components/main/Carousel.vue";
import GuideButton from "~/ components/button/GuideButton.vue";
import {useLoginStore} from "~/stores/pinia/useShowLogin";
import {useWindowStore} from "~/stores/pinia/useWindowStore";
import {gsap} from "gsap";


const windowStore = useWindowStore();
const loginStore = useLoginStore();
const width: any = ref(null)
const isShow = ref(true)
const isHide = ref(false)
const iconHide = ref(false)
const loginOpen = () => {
  loginStore.setLoginShow(true);
};

const IntroduceButtonGsap = async () => {
  width.value = windowStore.windowWidth
  isHide.value = width.value <= 450;
  isShow.value = width.value >= 450;
  iconHide.value = width.value <= 345
}

onMounted(async () => {
  await IntroduceButtonGsap()
  window.addEventListener('resize', IntroduceButtonGsap)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', IntroduceButtonGsap);
});



</script>


<style scoped lang="scss">
.lin_main_page {
  position: relative;

}

.lin_main_page_title {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60%;
  padding-top: 50px;
  transition: all 0.6s ease-in-out;
}

.lin_main_page_introduce {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex: 1;
  padding: 20px 0;
  align-content: center;
  transition: all 1s ease-in-out;
}

.lin_main_page_introduce div:nth-child(1) img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 20px;
}

.lin_main_page_introduce_icon {
  opacity: 1;
}

.lin_main_page_introduce_icon a {
  margin-right: 10px;
}

.lin_main_page_introduce_icon a:last-child {
  margin-right: 0;
}
.lin_display_flex_around span a {
  margin-right: 10px;
  cursor: pointer;
}
.lin_display_flex_around span a:last-child{
  margin-right: 0;
  color: #252727;
  opacity: 0.7;
}
.lin_display_flex_around span a:hover {
  opacity: 0.7;
}

.lin_main_page_introduce_active {
  opacity: 0;
  //display: none;
  transform: translateX(-10px);
  transition: all 0.3s ease-in-out;
}


.isShow {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.3s ease-in-out;
}

.isHide {
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.3s ease-in-out;
}

@media screen and (max-width: 580px) {
  .lin_main_page_title {
    font-size: 13px;
    transition: all 0.6s ease-in-out;
  }
}

@media screen and (max-width: 485px) {
  .lin_main_page_title {
    font-size: 11px;
    transition: all 0.3s ease-in-out;
  }
}

@media screen and (max-width: 400px) {
  .lin_main_page_title {
    font-size: 9px;
    transition: all 0.3s ease-in-out;
  }
}

@media screen and (max-width: 345px) {
  .lin_main_page_title {
    font-size: 8px;
    transition: all 0.3s ease-in-out;
    width: 100%;
  }

  .lin_main_page_introduce {
    justify-self: center;
    transition: all 1s ease-in-out;
  }
  .lin_guide {
    margin-left: 60px;
  }
}

@media screen and (max-width: 200px) {
  .lin_main_page_title {
    font-size: 7px;
  }
}

@media screen and (max-width: 430px) {
  .lin_main_page_introduce_icon {
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease-in-out;
  }
}


</style>